<template>
	<router-link :to="handleRouterLink" class="no-underline">
		<slot></slot>
	</router-link>
</template>

<script setup lang="ts">
import { useAppStore } from '@/store'
import { computed } from 'vue'

defineOptions({
	name: 'BaseIcon'
})
const props = defineProps({
	name: {
		type: String,
		required: true
	},
	params: {
		type: Object,
		required: false
	},
	to: {
		type: Object,
		required: false
	}
})
const appStore = useAppStore()

const handleRouterLink = computed(() => {
	if (props.to) {
		return { ...props.to }
	} else {
		return { name: props.name, params: { ...props.params, locale: appStore.lang } }
	}
})
// const handleRouterLink = () => {
// 	return { name: props.name, params: { locale: 'zh' } }
// }
</script>

<style scoped>
.base-icon {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	fill: currentColor;
	overflow: hidden;
}
</style>
